{% extends "VozminoskiStoreBundle:Admin:layout.html.twig" %}
{% block content %}

<form action="{{ path('admin_product_create') }}" method="post" {{ form_enctype(form) }} class="form-horizontal">
    <fieldset>
        <legend>Product creation</legend>

        {{ form_errors(form) }}

        <div class="control-group">
            {{ form_label(form.name, 'Name',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.name) }}
            <div class="controls">
                {{ form_widget(form.name) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.description, 'Description',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.description) }}
            <div class="controls">
                {{ form_widget(form.description, { 'attr': {'class': 'input-xxlarge'} }) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.category, 'Category',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.category) }}
            <div class="controls">
                {{ form_widget(form.category) }}
            </div>
        </div>

        <div class="control-group">
            Composition
            <div class="controls">
                <br id="composition-end" />
                <button id="add-composition">add</button>
            </div>
        </div>

        <div class="control-group">
            Discount
            <div class="controls">
                <br id="discount-end" />
                <button id="add-discount">add</button>
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.price, 'Price',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.price) }}
            <div class="controls">
                {{ form_widget(form.price) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.colors, 'Colors',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.colors) }}
            <div class="controls">
                {{ form_widget(form.colors) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.sizes, 'Sizes',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.sizes) }}
            <div class="controls">
                {{ form_widget(form.sizes) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.order, 'Order',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.order) }}
            <div class="controls">
                {{ form_widget(form.order) }}
            </div>
        </div>


        <div class="control-group">
            {{ form_label(form.is_active, 'Is active',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.is_active) }}
            <div class="controls">
                {{ form_widget(form.is_active) }}
            </div>
        </div>


        <div class="control-group">
            {{ form_label(form.file, 'Upload File',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(form.file) }}
            <div class="controls">
                {{ form_widget(form.file) }} <b>default resolution 130x50</b>
            </div>
        </div>

        <div class="control-group">
            Additional images
            <div class="controls">
                <br id="images-end" />
                <button id="add-image">add</button>
            </div>
        </div>



        {{ form_rest(form) }}
     <button type="submit" class="btn btn-success">Create</button>
</form>

<div style="padding: 50px">
    <a href="{{ path('admin_product') }}" class="btn btn-primary">
        Back to the list
    </a>
</div>

    <div style="display: none" id="composition-template">
        <div id="" data-number="" >
            <input name="" class="composition-name" value="">
            - <input name="" class="composition-value" value="">
            <button data-composition-number=""  class="delete-composition" >delete</button>
        </div>
    </div>

    <div style="display: none" id="discount-template">
        <div id="" data-number="" >
            <input name="" class="discount-quantity" value="">
            -
            <select name="" class="discount-type">
                <option value="0">percent</option>
                <option value="1">fixed price</option>
            </select>
            - <input name="" class="discount-value" value="">
            <button data-discount-number=""  class="delete-discount" >delete</button>
        </div>
    </div>


    <div style="display: none" id="image-template">
        <div id="" data-number="" >
            <input type="file" class="image-file" name="">
        </div>
    </div>

<script type="text/javascript">

    $('.delete-composition').live('click', function(event) {
        event.preventDefault();
        $('#composition-block-' + $(this).attr('data-composition-number')).remove();
        return false;
    });

    $('#add-composition').on('click', function(event) {
        event.preventDefault();

        var compositionBlock = $('#composition-template').children(),
                newCompositionBlock = compositionBlock.clone(),
                compositionNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newCompositionNumber = parseInt(compositionNumber) + 1;

        newCompositionBlock.attr('data-number', newCompositionNumber);
        newCompositionBlock.attr('id', 'composition-block-' + newCompositionNumber);

        newCompositionBlock.find('.composition-value').val('');
        newCompositionBlock.find('.composition-value').attr('name', 'composition[' + newCompositionNumber + '][value]');
        newCompositionBlock.find('.composition-name').val('');
        newCompositionBlock.find('.composition-name').attr('name', 'composition[' + newCompositionNumber + '][name]');
        newCompositionBlock.find('.delete-composition').attr('data-composition-number', newCompositionNumber);


        $('#composition-end').before(newCompositionBlock);

        return false;
    });

    $('#add-discount').on('click', function(event) {
        event.preventDefault();

        var discountBlock = $('#discount-template').children(),
                newDiscountBlockBlock = discountBlock.clone(),
                discountNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newDiscountNumber = parseInt(discountNumber) + 1;

        newDiscountBlockBlock.attr('data-number', newDiscountNumber);
        newDiscountBlockBlock.attr('id', 'discount-block-' + newDiscountNumber);

        newDiscountBlockBlock.find('.discount-value').val('');
        newDiscountBlockBlock.find('.discount-value').attr('name', 'discount[' + newDiscountNumber + '][value]');

        newDiscountBlockBlock.find('.discount-type').attr('name', 'discount[' + newDiscountNumber + '][type]');

        newDiscountBlockBlock.find('.discount-quantity').val('');
        newDiscountBlockBlock.find('.discount-quantity').attr('name', 'discount[' + newDiscountNumber + '][quantity]');


        newDiscountBlockBlock.find('.delete-discount').attr('data-discount-number', newDiscountNumber);


        $('#discount-end').before(newDiscountBlockBlock);

        return false;
    });

    $('.delete-discount').live('click', function(event) {
        event.preventDefault();
        $('#discount-block-' + $(this).attr('data-discount-number')).remove();
        return false;
    });


    $('#add-image').on('click', function(event) {
        event.preventDefault();

        var imageBlock = $('#image-template').children(),
                newImageBlockBlock = imageBlock.clone(),

                imageNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newImageNumber = parseInt(imageNumber) + 1;

        newImageBlockBlock.attr('data-number', newImageNumber);
        newImageBlockBlock.attr('id', 'image-block-' + newImageNumber);

        newImageBlockBlock.find('.image-file').attr('name', 'image[' + newImageNumber + ']');


        $('#images-end').before(newImageBlockBlock);

        return false;
    });

</script>
{% endblock %}
